<template>
    <view>
        <view class="box-slideLeft" >
            <view class="touch-item touch-slideLeft " @touchstart="touchS" @touchmove="touchM" @touchend="touchE"  :style="item_show.txtStyle">
                <slot />
            </view>

            <view class="touch-item del-box-touch-slideLeft cf-shuCenter"  @click="onDelItem">
                删除
                <!-- <view class="iconfont icon-shanchu"></view> -->
            </view>

        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, watch, defineEmits } from 'vue'

const item_show = ref({
    txtStyle: 'left:0px'
})
const delBtnWidth = ref(60) // 删除按钮宽度单位（rpx）
const startX = ref('')
const emit = defineEmits(['delItem'])
const props = defineProps(['time'])

// 监听props.time变化 并且重置item_show
watch(() => props.time, () => {
    item_show.value = {
        txtStyle: 'left:0px'
    }
})

// 点击删除按钮事件
const onDelItem = () => {
    emit('delItem', props.time)
}

const touchS = (e) => {
    if (e.touches.length === 1) {
        // 设置触摸起始点水平方向位置
        startX.value = e.touches[0].clientX
    }
}

const touchM = (e) => {
    if (e.touches.length === 1) {
        // 手指移动时水平方向位置
        const moveX = e.touches[0].clientX
        // 手指起始点位置与移动期间的差值
        const disX = startX.value - moveX
        let txtStyle = ""
        if (disX === 0 || disX < 0) { // 如果移动距离小于等于0，说明向右滑动，文本层位置不变
            txtStyle = "left:0px"
        } else if (disX > 0) { // 移动距离大于0，文本层left值等于手指移动距离
            txtStyle = "left:-" + disX + "px"
            if (disX >= delBtnWidth.value) {
                // 控制手指移动距离最大值为删除按钮的宽度
                txtStyle = "left:-" + delBtnWidth.value + "px"
            }
        }
        // 获取手指触摸的是哪一项
        item_show.value.txtStyle = txtStyle
    }
}

const touchE = (e) => {
    if (e.changedTouches.length === 1) {
        // 手指移动结束后水平位置
        const endX = e.changedTouches[0].clientX
        // 触摸开始与结束，手指移动的距离
        const disX = startX.value - endX
        // 如果距离小于删除按钮的1/2，不显示删除按钮
        const txtStyle = disX > delBtnWidth.value / 2 ? "left:-" + delBtnWidth.value + "px" : "left:0px"
        // 获取手指触摸的是哪一项
        item_show.value.txtStyle = txtStyle
    }
}

</script>

<style lang="scss">
    @import './iconfont.css';//便于有删除图标

    .box-slideLeft {
        view {
            box-sizing: border-box;
        }
        position: relative;
        overflow: hidden;

        .touch-item {
            position: absolute;
            top: 0;
            // padding: 10px 10px 10px;
            background-color: #FFFFFF;
            // border-radius: 10px;
            overflow: hidden;
        }

        .touch-slideLeft {
            position: relative;
            width: 100%;
            z-index: 5;
            transition: left 0.2s ease-in-out;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .del-box-touch-slideLeft {
            right: 0;
            float: left;
            width: 70px;
            height: 100%;
            line-height: 101px;
            background-color: #EA5863;
            border-radius: 0 10px 10px 0;
            color: #fff;
            font-size: 14px;
            font-weight: lighter;
            text-align: center;
        }
        .icon-shanchu{
            font-size: 44upx;
        }

        .cf-shuCenter{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

        }
    }

</style>
